<template>
	<view class="profile-container">
		<view class="profile-header">
			<view class="user-info">
				<!-- 登录后的头像与信息展示 -->
				<ImgVue v-if="isLoggedIn" class="avatar" :src="userData.avatar" />
				<!-- 未登录时，显示“立即登录”提示 -->
				<view v-if="!isLoggedIn" class="user-details" @click="goToLogin">
					<view class="login-prompt">
						<image class="avatar"
							src="https://ai-public.mastergo.com/ai/img_res/073e4300d43087d01108eae274791038.jpg"
							mode="aspectFill"></image>
						<text class="login-text">立即登录</text>
						<uni-icons type="right" size="14" color="#333333"></uni-icons>
					</view>
					<text class="login-desc">登录后享受更多权益</text>
				</view>
				<!-- 登录后的用户信息 -->
				<view v-if="isLoggedIn" class="user-details" @click="goToModify">
					<text class="username">{{userData.nickname}}</text>
					<text class="user-id">ID: {{userData.id}}</text>
				</view>
			</view>

			<!-- 登录后显示用户的统计数据 -->
			<view class="profile-stats" :class="{'unlogin': !isLoggedIn}">
				<view class="stat-item">
					<text class="stat-value">{{ isLoggedIn ? '368' : '--' }}</text>
					<text class="stat-label">收藏</text>
				</view>
				<view class="stat-item">
					<text class="stat-value">{{ isLoggedIn ? '2.3k' : '--' }}</text>
					<text class="stat-label">关注</text>
				</view>
				<view class="stat-item">
					<text class="stat-value">{{ isLoggedIn ? '12.8k' : '--' }}</text>
					<text class="stat-label">粉丝</text>
				</view>
			</view>
		</view>

		<!-- 菜单项，登录后变为可用 -->
		<view class="menu-section">
			<view class="menu-group">

				<view class="menu-item" v-if="isLoggedIn">
					<uni-icons type="camera" size="24" color="#333"></uni-icons>
					<text class="menu-text">注册成为摄影师</text>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
				<view class="menu-item" v-if="isLoggedIn">
					<uni-icons type="wallet" size="24" color="#333"></uni-icons>
					<text class="menu-text">我的钱包</text>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
				<view class="menu-item" v-if="isLoggedIn">
					<uni-icons type="star" size="24" color="#333"></uni-icons>
					<text class="menu-text">我的收藏</text>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
				<view class="menu-item" v-if="isLoggedIn">
					<uni-icons type="cart" size="24" color="#333"></uni-icons>
					<text class="menu-text">我的订单</text>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>


				<!-- 未登录时显示为禁用状态 -->
				<view v-if="!isLoggedIn" class="menu-item">
					<uni-icons type="wallet" size="24" color="#999"></uni-icons>
					<text class="menu-text disabled">我的钱包</text>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
				<view v-if="!isLoggedIn" class="menu-item">
					<uni-icons type="star" size="24" color="#999"></uni-icons>
					<text class="menu-text disabled">我的收藏</text>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
				<view v-if="!isLoggedIn" class="menu-item">
					<uni-icons type="cart" size="24" color="#999"></uni-icons>
					<text class="menu-text disabled">我的订单</text>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
			</view>

			<view class="menu-group">
				<view class="menu-item" @click="goToHelp">
					<uni-icons type="help" size="24" color="#333"></uni-icons>
					<text class="menu-text">帮助与反馈</text>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
				<view class="menu-item" @click="goToShezhi">
					<uni-icons type="gear" size="24" color="#333"></uni-icons>
					<text class="menu-text">设置</text>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { getUserIdFromToken } from '../../../util/util';
	import { getUserInfo } from '../../../api/user';
	import ImgVue from '../../../components/Img/Img.vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	// 使用 Vue 的 ref 来处理登录状态和用户数据
	const isLoggedIn = ref(false); // 登录状态
	const userData = ref(null); // 存储用户数据

	// 跳转到登录页面
	const goToLogin = () => {
		isLoggedIn.value = false; // 用户未登录，设置为未登录状态
		uni.navigateTo({
			url: '/pages/login/login' // 根据项目的实际路径调整
		});
	};

	const goToShezhi = () => {
		uni.navigateTo({
			url: '/pages/shezhi/shezhi'
		});
	};

	const goToHelp = () => {
		uni.navigateTo({
			url: '/pages/help/help'
		});
	};

	const goToModify = () => {
		uni.navigateTo({
			url: '/pages/modify/modify'
		});
	};

	// 模拟 API 调用函数（获取用户信息）
	const fetchUserData = async () => {
		try {
			const response = await getUserInfo();
			userData.value = response.data
		} catch (error) {
			console.error('请求用户数据时出错:', error);
			userData.value = null;
		}
	};

	// 页面加载时检查 localStorage 中是否有有效的 token
	onLoad(async () => {
		const token = uni.getStorageSync('token'); // 从 localStorage 获取 token
		if (token) {
			// 如果 token 存在，表示用户已登录
			isLoggedIn.value = true;

			// 解析 token 获取用户 ID
			const id = getUserIdFromToken();
			if (id) {
				// 使用解析出的 ID 调用 API 获取用户数据
				fetchUserData();
			} else {
				console.error('无法从 token 中解析出用户 ID');
			}
		} else {
			// 如果 token 不存在，表示用户未登录
			isLoggedIn.value = false;
		}
	});
</script>


<style>
	page {
		height: 100%;
	}

	.profile-container {
		min-height: 100%;
		background-color: #f8f8f8;
		padding-bottom: 40rpx;
	}

	.profile-header {
		background-color: #ffffff;
		padding: 40rpx 32rpx;
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin-right: 24rpx;
	}

	.user-details {
		flex: 1;
	}

	.username {
		font-size: 18px;
		color: #333333;
		font-weight: 500;
		margin-bottom: 8rpx;
		display: block;
	}

	.user-id {
		font-size: 12px;
		color: #999999;
		display: block;
	}

	.profile-stats {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		border-top: 1px solid #f0f0f0;
	}

	.profile-stats.unlogin {
		opacity: 0.6;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-value {
		font-size: 16px;
		color: #333333;
		font-weight: 500;
		margin-bottom: 8rpx;
	}

	.stat-label {
		font-size: 12px;
		color: #999999;
	}

	.menu-section {
		margin-top: 20rpx;
	}

	.menu-group {
		background-color: #ffffff;
		margin-bottom: 20rpx;
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 32rpx;
		border-bottom: 1px solid #f0f0f0;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-text {
		flex: 1;
		font-size: 14px;
		color: #333333;
		margin-left: 20rpx;
	}

	.menu-text.disabled {
		color: #999999;
	}

	.profile-container {
		min-height: 100%;
		background-color: #f8f8f8;
		padding-bottom: 40rpx;
	}

	.profile-header {
		background-color: #ffffff;
		padding: 40rpx 32rpx;
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin-right: 24rpx;
		background-color: #f5f5f5;
	}

	.user-details {
		flex: 1;
	}

	.login-prompt {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.login-text {
		font-size: 18px;
		color: #333333;
		font-weight: 500;
		margin-right: 8rpx;
	}

	.login-desc {
		font-size: 12px;
		color: #999999;
	}

	.profile-stats {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		border-top: 1px solid #f0f0f0;
	}

	.profile-stats.unlogin {
		opacity: 0.6;
	}
</style>